<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>学生信息表单</title>
    <link rel="stylesheet" href="../static/css/form.css">
    <script src="../src/js/lib/jquery.min.js"></script>
</head>

<body>
<h2 style="text-align: center">学生信息表单</h2>
<p class="descript-info">Please fill student base info to submit to server</p>
<form class="base-info-form" name="myForm" action="#" method="post">
    <div class="info-row">
<!--        <label for="student_id" style="">学号</label>-->
<!--        <p placeholder="学生id" type="text" id="student_id" name="student_id">-->
        学号：<p id="student_id"></p>
    </div>
    <div class="select-row">
        <label class="row-title">性别</label>
        <div class="gender-radios">
            <input type="radio" id="male" name="gender" value="男">
            <label for="male">男性</label>
            <input type="radio" id="female" name="gender" value="女">
            <label for="female">女性</label>
        </div>
    </div>
    <div class="info-row">
        <label for="name" style="display: none">姓名</label>
        <input placeholder="姓名" type="text" id="name" name="name">
    </div>
    <div class="info-row">
        <label for="description" style="display: none">描述</label>
        <textarea id="description" placeholder="描述" name="description" rows="5" cols="40"></textarea>
    </div>
    <div class="btn-row">
        <button class="submit-btn" type="button" onclick="validateForm()">提交</button>
    </div>
    <div class="btn-out">
        <a href="./student.html">
            <br><br>
            <span class="text">返回</span>
        </a>
    </div>
</form>
<script>
    // document.forms["myForm"]["student_id"].value = localStorage.getItem("userID");
    window.onload = function () {
        // 在此处调用接口提交表单数据
        $.ajax("../api.php/get_student_info", {
            type: "get",
            dataType: "json",
            success: function (res, status_code) {
                if (res["code"] == 200) {
                    // const uid = localStorage.getItem("userID");
                    // const data = res["data"].findIndex(student => student.student_id === uid);
                    // if (!data) return
                    // document.forms["myForm"]["student_id"].value = data.student_id
                    // document.forms["myForm"]["gender"].value = data.student_sex
                    // document.forms["myForm"]["name"].value = data.student_name
                    // document.forms["myForm"]["description"].value = data.description
                    $("#student_id").text(res["data"][0].student_id);
                    if (res["data"][0].student_sex === "男") {
                        $("#male").prop("checked", true);
                    } else {
                        $("#female").prop("checked", true);
                    }
                    document.forms["myForm"]["name"].value = res["data"][0].student_name;
                    document.forms["myForm"]["description"].value = res["data"][0].description;
                }
            },
            error: function () {
                alert('获取用户信息失败');
            }
        });
    }

    function validateForm() {
        let studentId = $("#student_id").text();
        let gender = $("input[name='gender']:checked").val()
        let name = document.forms["myForm"]["name"].value;
        let description = document.forms["myForm"]["description"].value;
        if (studentId === "" || gender === "" || name === "") {
            alert("请输入完整的学生信息");
            return false;
        }
        // 在此处调用接口提交表单数据
        $.ajax("../api.php/update_student_info", {
            type: "POST",
            dataType: "json",
            data: {
                studentId: studentId,
                student_sex: gender,
                student_name: name,
                description: description,
            },
            success: function (res, status_code) {
                if (res["code"] == 200) {
                    alert("修改成功");
                    window.location.href = "./student.html";
                }
            },
            error: function () {
                alert('出错了');
            }
        });
    }
</script>
</body>

</html>